import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { PageContainer, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Drawer } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { CompilationModel } from '../../data';
const CurrentPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
  const [dates, setDates] = useState<string[]>([]);

  useEffect(() => {
    let startDate = moment('2024-05-17');
    let endDate = moment('2024-05-30');
    const dateArray: string[] = [];

    while (startDate.isSameOrBefore(endDate)) {
      dateArray.push(startDate.format('YYYY-MM-DD'));
      startDate = startDate.add(1, 'day');
      if (!startDate.isSameOrBefore(endDate)) dateArray.push('总计');
    }
    setDates(dateArray);
  }, []);
  const generateColumns = (dates: string[]): ProColumns<CompilationModel.compilationResponse>[] => {
    const categories = ['缺卡(次数)', '迟到(次数)', '早退(次数)', '旷工(次数)', '异常(次数)'];

    const dateColumns = dates.map((date) => ({
      title: date,
      children: categories.map((category) => ({
        title: category,
        dataIndex: `${date}-${category}`,
        width: date === '总计' ? 100 : undefined,
        fixed: date === '总计' ? 'right' : undefined,
      })),
    }));

    const basic: ProColumns<CompilationModel.compilationResponse>[] = [
      {
        title: '部门编号',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        fixed: 'left',
      },
      {
        title: '部门名称',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        fixed: 'left',
      },
    ];
    console.log([...basic, ...dateColumns]);

    return [...basic, ...dateColumns];
  };

  const columns = generateColumns(dates);

  return (
    <PageContainer>
      <ProTable<CompilationModel.compilationResponse, CompilationModel.compilationResponse>
        headerTitle={intl.formatMessage({
          id: 'pages.searchTable.title',
          defaultMessage: 'Enquiry form',
        })}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        scroll={{ x: 'max-content' }}
      />
      <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.name && (
          <ProDescriptions<API.RuleListItem>
            column={2}
            title={currentRow?.name}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.name,
            }}
            columns={columns as ProDescriptionsItemProps<API.RuleListItem>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default CurrentPage;
